<script setup lang="ts">
import { edit } from '@/api/llm/model'
import useDictStore from '@/store/modules/dict'
import { ModalShowType } from '@/types/common'
import { ElButton, ElForm, ElFormItem, ElInput, FormInstance, FormRules } from 'element-plus'
import { computed, ref } from 'vue'

const props = defineProps<{
  // modalShow: ModalShowType
  modelId: string
  // modelType: string
  // modelName: string
  // modelUrl: string
  // modelKey: string
  onSearch?: () => Promise<void>
}>()

// const emit = defineEmits<{
//   (e: 'update:modalShow', type: ModalShowType): void
// }>()

// const modalShow = computed({
//   get() {
//     return props.modalShow
//   },
//   set(value) {
//     emit('update:modalShow', value)
//   },
// })

const modalShow = defineModel('modalShow')
const formData = defineModel<{
  modelType: string
  modelName: string
  modelUrl: string
  modelKey: string
}>('formData')

const { model_type } = useDictStore().getDicts('model_type')

function onClose() {
  if (modalShow.value === ModalShowType.Edit) {
    props.onSearch()
  }
  modalShow.value = ModalShowType.Hide
}

const validationRules: FormRules = {
  modelType: [{ required: true, message: '请输入' }],
  modelName: [{ required: true, message: '请输入' }],
  modelUrl: [{ required: true, message: '请输入' }],
  modelKey: [],
}

const formRef = ref<FormInstance>()
/** 提交表单 */
async function onSubmit() {
  formRef.value.validate(async (valid) => {
    console.log('🚀 ~ file: useApply.ts:51 ~ onSubmit ~ valid:', valid)
    if (!valid) return
    // console.log(toRaw(formData))
    const { code, msg } = await edit({ modelId: props.modelId, ...toRaw(formData.value) })
    if (code === 200) {
      ElMessage.success('成功')
      modalShow.value = ModalShowType.Hide
    } else {
      ElMessage.error(`失败：${msg}`)
    }
  })
}
</script>

<template>
  <el-drawer
    :close-on-click-modal="false"
    title="模型详情"
    class="common-dialog"
    :model-value="modalShow !== ModalShowType.Hide"
    :before-close="onClose"
    size="50%"
  >
    <el-form
      ref="formRef"
      class="w-[520px]"
      label-width="200px"
      element-loading-text="加载中"
      :model="formData"
      :rules="validationRules"
    >
      <el-form-item label="模型名称" prop="modelName">
        <el-input v-model="formData.modelName" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="模型类别" prop="modelType">
        <!-- <el-input v-model="formData.modelType" placeholder="请输入" /> -->
        <el-select v-model="formData.modelType" clearable placeholder="请选择">
          <!-- <el-select :value="formData.modelType" @input="formData.modelType=$event.target.value" clearable placeholder="请选择"> -->
          <el-option
            v-for="item in model_type"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="模型地址" prop="modelUrl">
        <el-input v-model="formData.modelUrl" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="模型密钥" prop="modelKey">
        <el-input v-model="formData.modelKey" placeholder="请输入" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">修改模型</el-button>
        <el-button @click="modalShow = ModalShowType.Hide">返回</el-button>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button v-if="modalShow === ModalShowType.View" @click="modalShow = ModalShowType.Hide">
        关闭
      </el-button>
    </template>
  </el-drawer>
</template>
